<template>
  <div class="h-full" style="height: 200px" :style="'height: '+props.height">
    <Codemirror
      v-model:value="getValue"
      :options="{
        readOnly: props.readonly,
        ...(props.cmOptions as {})
      } as EditorConfiguration"
      border
      :ref="cmRef"
      height="100%"
      width="100%"
      @change="handleValueChange"
    >
    </Codemirror>
  </div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
import Codemirror from "codemirror-editor-vue3";
import "codemirror/mode/yaml/yaml.js";
import "codemirror/mode/javascript/javascript.js";
import "codemirror/mode/sql/sql.js";
import "codemirror/mode/css/css.js";
import "codemirror/mode/go/go.js";
import "codemirror/mode/htmlmixed/htmlmixed.js";
import "codemirror/mode/htmlembedded/htmlembedded.js";
import "codemirror/mode/lua/lua.js";
import "codemirror/mode/nginx/nginx.js";
import "codemirror/mode/perl/perl.js";
import "codemirror/mode/php/php.js";
import "codemirror/mode/shell/shell.js";
import "codemirror/mode/xml/xml.js";
import "codemirror/mode/vue/vue.js";
import "codemirror/mode/python/python.js";

import "codemirror/theme/dracula.css";
import "codemirror/theme/idea.css";
import "codemirror/theme/material.css";

import { EditorConfiguration } from "codemirror";

const props = defineProps({
  value: { type: [Object, String] },
  cmOptions: {
    default: {
      mode: "text/javascript",
    } as EditorConfiguration
  },
  readonly: { type: Boolean },
  height: { type: String, default: "300px" },
  autoFormat: { type: Boolean, default: true },
  bordered: { type: Boolean, default: false }
});
const cmRef = ref<InstanceType<typeof Codemirror>>();
const emit = defineEmits(["change", "update:value", "format-error"]);

const getValue = computed(() => {
  const { value } = props;
  return value as string;
});

function handleValueChange(v) {
  emit("update:value", v);
  emit("change", v);
}
</script>
